<!-- 排行数据数据 -->
<template>

  <div class="pag" >
    <div class="banner">
      <h3>{{ new Date() | toDate }}数据信息</h3>
    </div>
    <div class="user-data1">
      <div class="rank-title">
          <span class="username">昵称/UID</span><span>自有令牌数</span><span class="cvnt-number">持币数量</span>
      </div>
      <div class="rank-wrapper">
          <cube-scroll ref="scroll" :data="rankList" :options="options">
            <div class="item" v-for="(item, index) in rankList" :key="index">
              <div class="item-rank rank-position">
                {{index + 1}}
              </div>
              <h3 class="item-rank rank-name">
                <strong>{{item.name}}</strong><span>{{item.uid}}</span>
              </h3>
              <p class="item-rank">{{item.nodeCount}}</p>
              <h4 class="item-rank item-cvnt">{{Number(item.cvnt).toFixed(0) | numAddSep}}</h4>
            </div>
          </cube-scroll>
      </div>
    </div>
  </div>

</template>

<script>
    import {getViewUser, getViewCvnt, getViewPledge } from 'api/index'
    import {cvntRankList} from 'api/register'

    export default {
        data() {
            return {
                rankList: [],
                options: {
                  click: true,
                  tap: true,
                  pullUpLoad: false
                }
            }
        },
        beforeRouteEnter (to, from, next) {
            next((vm) => {
                vm.getData();
                vm.getRankList();
            })
        },
        methods: {
            async getData() {
                let data = getViewUser({
                    t: Date.now()
                })
                this.data = data
            },
            getRankList() {
                cvntRankList().then((data) => {
                  // console.log(data);
                  if (data.status && data.status == 1) {
                    if (data.data && data.data.length > 0) {
                      this.rankList = data.data;
                    }
                    if (data.data == null || data.data.length == 0) {
                      this.rankList = [];
                    }
                  }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    height:100%;
  }

  .banner {
    //width:750px;
    height:310px;
    background:linear-gradient(210deg,rgba(50,123,254,1),rgba(58,182,255,1));
    h3 {
      padding: 50px 0 0 29px;
      font-size:42px;
      font-weight:600;
      color:rgba(255,255,255,1);
    }
  }

  .user-data1 {
    width:690px;
    height:calc(100% - 140px);
    background:rgba(255,255,255,1);
    box-shadow:0 1px 2px 0 rgba(10,29,87,0.2);
    border-radius:14px 14px 0 0;
    margin: -170px auto 0 auto;
    /*overflow: scroll;*/
    /*margin: -170px auto 24px auto;*/
  }

  .rank-title{
    display:flex;
    font-size:28px;
    /*padding:31px 0 30px;*/
    height:88px;
    line-height:88px;
    border-bottom:1px solid #EDEEF2;
    color:#838899;
    span{
      flex:1;
      text-align:center;
    }
    .username{
      padding-left:24px;
      flex:1.35;
    }
    .cvnt-number{
      padding-right:24px;
    }
  }
  .rank-wrapper{
    height:calc(100% - 89px);
  }
  .item{
    display:flex;
    align-items:center;
    padding:19px 0 13px;
    margin:0 24px;
    border-bottom:1px solid #ECECEC;
    text-align:center;
    .item-rank{
      flex:1;
      strong{
        display:block;
        margin-bottom:5px;
        font-weight:600;
        max-width:195px;
        word-wrap:break-word;
        color:#202C5B;
      }
      span{
        display:block;
        color:#838899;
      }
    }
    .rank-position{
      flex:0.35;
      color:#202C5B;
      font-size:24px;
    }
    .rank-name{
      text-align:left;
    }
    .item-cvnt{
      /*text-align:right;*/
    }
    p{
      color:#1253FC;
    }
    h4{
      color:#202C5B;
    }
  }

  .item:last-child{
    border-bottom:none;
  }









</style>
















